<template>
  <van-nav-bar left-arrow fixed @click-left="onBack" @click-right="show = true">
    <template #title>
      <van-field
        v-model="proName"
        @change="keywords"
        placeholder="请输入商品"
      />
    </template>

    <template #right>
      <van-icon name="ellipsis" />
    </template>
  </van-nav-bar>

  <div class="shopType">
    <van-dropdown-menu>
      <van-dropdown-item @change="onFlag" v-model="flag" :options="option1" />
      <van-dropdown-item
        @change="onOrderBy"
        v-model="order"
        :options="option2"
      />
    </van-dropdown-menu>
  </div>
  <div class="clear"></div>
  <div class="hbox"></div>
  <div class="mainWarp" style="background: #f3f3f3">
    <ul class="proul" v-if="ProductList.length > 0">
      <li v-for="item in ProductList" :key="item.id">
        <router-link
          :to="{ path: '/product/product/info', query: { proid: item.id } }"
        >
          <img :src="item.cover_cdn" style="height: 100px" />
        </router-link>
        <router-link
          :to="{ path: '/product/product/info', query: { proid: item.id } }"
        >
          <p class="tit">{{ item.name }}</p>
        </router-link>
        <div class="price">
          <p>￥ {{ item.price }}</p>
        </div>
      </li>
    </ul>
    <van-empty v-else description="暂无商品" />
  </div>

  <van-popup v-model:show="show" round position="bottom">
    <van-picker
      :columns="TypeList"
      @cancel="show = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>
<script>
export default {
  data() {
    return {
      typeid: 0,
      flag: 0,
      order: "createtime", // 排序
      ProductList: [],
      show: false,
      TypeList: [],
      option1: [
        { text: "全部", value: 0 },
        { text: "新品", value: 1 },
        { text: "热销", value: 2 },
        { text: "推荐", value: 3 },
      ],
      option2: [
        { text: "默认排序", value: "createtime" },
        { text: "价格排序", value: "price" },
        { text: "库存排序", value: "stock" },
      ],
    };
  },
  created() {
    this.typeid = this.$route.query.typeid;

    this.getProductData();

    this.getTypeData();
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    async getProductData() {
      let data = {
        typeid: this.typeid,
        order: this.order,
        flag: this.flag,
      };

      let result = await this.$api.ProductIndex(data);

      if (result.code === 1) {
        this.ProductList = result.data;
      }

      // console.log(this.ProductList);
    },
    onFlag() {
      this.getProductData();
    },
    onOrderBy() {
      this.getProductData();
    },
    onConfirm(values) {
      this.show = false;

      this.typeid = values.selectedOptions[0].value;

      this.getProductData();
    },
    async getTypeData() {
      let result = await this.$api.TypeIndex();

      if (result.code === 1) {
        let data = [];

        for (let item of result.data) {
          data.push({
            text: item.name,
            value: item.id,
          });
        }

        if (data.length > 0) {
          this.TypeList = data;
        }
      }
    },
    async keywords() {
      let data = {
        proName: this.proName,
      };
      // console.log(data);

      let result = await this.$api.ProductIndex(data);

      if (result.code === 1) {
        this.ProductList = result.data;
      }

      // console.log(this.ProductList);
      // console.log(result);

      // this.getTypeData(data);
    },
  },
};
</script>